<script setup lang="ts">
import { ArrowAutofitUp, Trash, Copy, BrandHipchat, DotsVertical } from '@vicons/tabler'
import { Star12Filled, Star12Regular } from '@vicons/fluent'
import { h, computed } from 'vue'
import { NIcon, NDropdown } from 'naive-ui'

interface Props {
  sessionName: string
  isCollect: boolean
}

const props = withDefaults(defineProps<Props>(), {
  sessionName: '',
  isCollect: false
})

const emit = defineEmits<{
  (e: 'collect'): void
  (e: 'uncollect'): void
  (e: 'rename'): void
  (e: 'delete'): void
  (e: 'aiRename'): void
  (e: 'copy'): void
}>()

const sessionItemOptions = computed(() => [
  {
    label: '智能重命名',
    key: 'aiRename',
    icon: () => h(NIcon, null, { default: () => h(ArrowAutofitUp) })
  },
  {
    label: '重命名',
    key: 'rename',
    icon: () => h(NIcon, null, { default: () => h(Copy) })
  },
  {
    type: 'divider',
    key: 'd1'
  },
  {
    label: '创建副本',
    key: 'copy',
    icon: () => h(NIcon, null, { default: () => h(Copy) })
  },
  {
    type: 'divider',
    key: 'd2'
  },
  {
    key: 'delete',
    label: () => h('span', { class: 'text-red-500' }, '删除'),
    icon: () => h(NIcon, null, { default: () => h(Trash, { class: 'text-red-500' }) })
  }
])

const handleCollectClick = () => {
  emit(props.isCollect ? 'uncollect' : 'collect')
}

const handleSessionOptionsClick = (key: string) => {
  switch (key) {
    case 'aiRename':
      emit('aiRename')
      break
    case 'rename':
      emit('rename')
      break
    case 'copy':
      emit('copy')
      break
    case 'delete':
      emit('delete')
      break
  }
}
</script>

<template>
  <div
    class="w-full px-2.5 py-1.5 flex items-center justify-between rounded-md hover:bg-gray-200 group cursor-pointer"
  >
    <div class="flex items-center">
      <div
        class="cursor-pointer flex items-center justify-center"
        :class="{ 'text-yellow-400': isCollect }"
        @click="handleCollectClick"
      >
        <NIcon size="20">
          <component :is="isCollect ? Star12Filled : Star12Regular" />
        </NIcon>
      </div>
      <div class="text-sm font-bold ml-1 select-none flex items-center justify-center">
        {{ sessionName }}
      </div>
    </div>
    <div class="cursor-pointer flex items-center justify-center">
      <NDropdown
        trigger="click"
        size="small"
        :options="sessionItemOptions"
        @select="handleSessionOptionsClick"
      >
        <NIcon size="20">
          <DotsVertical />
        </NIcon>
      </NDropdown>
    </div>
  </div>
</template>

<style scoped>
.flex-center {
  @apply flex items-center justify-center;
}
</style>